<!DOCTYPE html>
<link rel="match" href="../expected/canvas-filters-ref.html"/>
<meta name="fuzzy" content="maxDifference=0-6;totalPixels=0-17784">
<style>
    * {
        margin: 0;
        /* Hide the scrollbar. */
        overflow: hidden;
    }

    body {
        background-color: white;
    }
</style>
<body>
<div id="canvas-container">
    <canvas id="canvas-none" width="400" height="300"></canvas>
    <canvas id="canvas-blur" width="400" height="300"></canvas>
    <canvas id="canvas-brightness" width="400" height="300"></canvas>
    <canvas id="canvas-contrast" width="400" height="300"></canvas>
    <canvas id="canvas-grayscale" width="400" height="300"></canvas>
    <canvas id="canvas-hue-rotate" width="400" height="300"></canvas>
    <canvas id="canvas-invert" width="400" height="300"></canvas>
    <canvas id="canvas-opacity" width="400" height="300"></canvas>
    <canvas id="canvas-saturate" width="400" height="300"></canvas>
    <canvas id="canvas-sepia" width="400" height="300"></canvas>
    <canvas id="canvas-drop-shadow" width="400" height="300"></canvas>
</div>
</body>
<script>
    const filters = [
        {id: 'canvas-none', filter: 'none'},
        {id: 'canvas-blur', filter: 'blur(5px)'},
        {id: 'canvas-brightness', filter: 'brightness(150%)'},
        {id: 'canvas-contrast', filter: 'contrast(150%)'},
        {id: 'canvas-grayscale', filter: 'grayscale(100%)'},
        {id: 'canvas-hue-rotate', filter: 'hue-rotate(90deg)'},
        {id: 'canvas-invert', filter: 'invert(100%)'},
        {id: 'canvas-opacity', filter: 'opacity(50%)'},
        {id: 'canvas-saturate', filter: 'saturate(200%)'},
        {id: 'canvas-sepia', filter: 'sepia(100%)'},
        {id: 'canvas-drop-shadow', filter: 'drop-shadow(2em 10px 10px rgba(0, 0, 0, 0.5))'},
    ];

    const img = new Image();
    img.src = '../data/car.png'; // Placeholder image
    img.onload = () => {
        filters.forEach(({id, filter}) => {
            const canvas = document.getElementById(id);
            const ctx = canvas.getContext('2d');
            ctx.filter = filter;

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 20, 50, 150, 100);

            ctx.fillStyle = 'blue';
            ctx.beginPath();
            ctx.arc(100, 150, 50, 0, Math.PI * 2);
            ctx.fill();

            ctx.fillStyle = 'green';
            ctx.beginPath();
            ctx.rect(200, 100, 100, 100);
            ctx.fill();

            ctx.strokeStyle = 'red';
            ctx.lineWidth = 5;
            ctx.beginPath();
            ctx.moveTo(50, 250);
            ctx.lineTo(350, 250);
            ctx.stroke();
        });
    };
</script>
